<script lang="ts" setup="">
import type { Ref } from 'vue'
import { computed, ref } from 'vue'
import EditableText from '@/components/editableText.vue'

interface DataItem {
	key: string
	name: string
	age: number
	address: string
}

const columns = [
	{
		title: '姓名',
		dataIndex: 'name',
		width: '30%',
	},
	{
		title: '年龄',
		dataIndex: 'age',
	},
	{
		title: '地址',
		dataIndex: 'address',
	},
	{
		title: '订单',
		dataIndex: 'order',
	},
	{
		title: '状态',
		dataIndex: 'status',
	},
	{
		title: '操作',
		dataIndex: 'operation',
	},
]
const dataSource: Ref<DataItem[]> = ref([
	{
		key: '0',
		name: '龙狮 0',
		age: 20,
		address: '广东佛山 no. 0',
		status: 1,
		order: '购买了《孤岛惊魂6》',
		switchLoading: false,
	},
	{
		key: '1',
		name: '龙狮 1',
		age: 20,
		address: '广东佛山 no. 1',
		status: 0,
		order: '购买了《地下城与勇士》',
		switchLoading: false,
	},
])
const count = computed(() => dataSource.value.length + 1)

const onDelete = (key: string) => {
	dataSource.value = dataSource.value.filter(item => item.key !== key)
}
const handleAdd = () => {
	const newData = {
		key: `${count.value}`,
		name: `龙狮 ${count.value}`,
		age: 20,
		address: `广东佛山 no. ${count.value}`,
		status: 0,
		order: '购买了《英雄联盟》',
		switchLoading: false,
	}
	dataSource.value.push(newData)
}
</script>

<template>
	<div>
		<div class="flex align-center">
			<a-button
				class="editable-add-btn"
				style="margin-bottom: 8px"
				@click="handleAdd"
				>增加数据
			</a-button>
			<div class="flex ml-6 align-center mb-2">
				<a-input
					class="search-input"
					placeholder="输入内容进行搜索"
				></a-input>
				<a-button class="ml-2" type="primary" shape="round"
					>搜索
				</a-button>
			</div>
		</div>
		<a-table
			class="editable-table"
			bordered
			:data-source="dataSource"
			:columns="columns"
		>
			<template #bodyCell="{ column, text, record }">
				<template v-if="column.dataIndex === 'name'">
					<div class="editable-cell">
						<EditableText v-model:text="record.name" />
					</div>
				</template>
				<template v-else-if="column.dataIndex === 'status'">
					<a-tag :color="record.status ? 'green' : 'red'"
						>{{ record.status ? '交易成功' : '交易失败' }}
					</a-tag>
				</template>
				<template v-else-if="column.dataIndex === 'operation'">
					<div class="flex align-center justify-center">
						<a-popconfirm
							v-if="dataSource.length"
							cancelText="取消"
							ok-text="删除"
							title="是否删除这条信息？"
							@confirm="onDelete(record.key)"
						>
							<a>删除</a>
						</a-popconfirm>
						<a-switch
							class="ml-2"
							v-model:checked="record.status"
							:checked-value="1"
							:un-checked-value="0"
							checked-children="成功"
							un-checked-children="失败"
							:loading="record.switchLoading"
						></a-switch>
					</div>
				</template>
			</template>
		</a-table>
	</div>
</template>

<style lang="scss" scoped>
.editable-table {
	:deep(.ant-table-cell) {
		text-align: center;
	}

	:deep(.ant-switch) {
		height: 30px;
	}

	:deep(.ant-switch-handle) {
		top: 6px;
	}
}

.editable-cell {
	position: relative;

	.editable-cell-input-wrapper,
	.editable-cell-text-wrapper {
		padding-right: 24px;
	}

	.editable-cell-text-wrapper {
		padding: 5px 24px 5px 5px;
	}

	.editable-cell-icon,
	.editable-cell-icon-check {
		position: absolute;
		right: 0;
		width: 20px;
		cursor: pointer;
	}

	.editable-cell-icon {
		margin-top: 4px;
		display: none;
	}

	.editable-cell-icon-check {
		line-height: 28px;
	}

	.editable-cell-icon:hover,
	.editable-cell-icon-check:hover {
		color: #108ee9;
	}

	.editable-add-btn {
		margin-bottom: 8px;
	}
}

.search-input {
	width: 240px;
}

.editable-cell:hover .editable-cell-icon {
	display: inline-block;
}
</style>
